<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>在线考试平台</title>
    <link rel="shortcut icon" href="static/layui/images/exam.png" type="image/x-icon">
    <link rel="stylesheet" href="static/layui/css/font.css">
    <link rel="stylesheet" href="static/layui/css/xadmin.css">
    <script src="static/layui/lib/layui/layui.js"></script>
    <script src="static/layui/js/xadmin.js"></script>
    <script src="static/layui/js/jquery.min.js"></script>

</head>

<body class="index">
<div class="container">
    <div class="logo">
        <a href="#">在线考试平台</a>
    </div>
    <ul class="layui-nav left" lay-filter="user_head">
        <li class="layui-nav-item"><a href="/exam_system/online_exam">在线考试</a></li>
        <li class="layui-nav-item"><a href="/exam_system/online_test">在线测试</a></li>
        <li class="layui-nav-item"><a href="/exam_system/score">我的成绩</a></li>
        <li class="layui-nav-item"><a href="/exam_system/error_question">我的错题</a></li>
        <li class="layui-nav-item"><a href="/exam_system/resources_library">资源库</a></li>
    </ul>
    <ul class="layui-nav right" lay-filter="header-user" id="user-state">

    </ul>
</div>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-sm12 layui-col-md10 layui-col-md-offset1">
            <div class="layui-card">
                <div class="layui-card-body">
                    <div class="layui-tab layui-tab-brief" lay-filter="my_exam">
                        <ul class="layui-tab-title">
                            <li class="layui-this" value="0">未完成</li>
                            <li value="1">已完成</li>
                        </ul>
                        <div class="layui-tab-content">
                            <div class="layui-row layui-col-space15" style="background: #f7f8fc" id="exam_list">

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

</body>

<script>
    layui.use(['element', "form", 'jquery', 'layer'], function () {
        const form = layui.form;
        const $ = layui.jquery;
        const layer = layui.layer;
        const element = layui.element;
        header(element)
        get_not_finish_exam_by_u_id();


        element.on('tab(my_exam)', function (data) {
            var type = $(this).attr('value')
            if (type === '0') {
                get_not_finish_exam_by_u_id()
            } else if (type === '1') {
                get_finish_exam_by_u_id()
            }
        });
    });

    function header(element) {
        var user_json = JSON.parse(sessionStorage.getItem("userJson"));
        var text = ""
        if (user_json === null) {
            location.href = '/exam_system/';
        } else {
            text += "<li class=\"layui-nav-item\">" +
                "                    <a href=\"javascript:;\">" + user_json.u_name + "</a>" +
                "                    <dl class=\"layui-nav-child\">" +
                "                        <dd><a onclick='modify_psw()'>修改密码</a></dd>" +
                "                        <dd><a onclick='user_quit()'>退出</a></dd>" +
                "                    </dl>" +
                "                </li>"
            $("#user-state").html(text)
        }
        element.render('header-user')
    }

    function user_quit() {
        sessionStorage.clear("userJson");
        location.href = '/exam_system/';
    }

    function modify_psw() {
        layui.use(['element', "form", 'jquery', 'layer'], function () {
            const form = layui.form;
            const $ = layui.jquery;
            const layer = layui.layer;
            const element = layui.element;
            var text = "<form class=\"layui-form layui-form-pane\" action=\"\">" +
                "    <div class=\"layui-form-item\">" +
                "        <label class=\"layui-form-label\">旧密码</label>" +
                "        <div class=\"layui-input-block\">" +
                "            <input type=\"text\" name=\"o_psw\" id='o_psw' autocomplete=\"off\" placeholder=\"请输入旧密码\"" +
                "                   class=\"layui-input\">" +
                "        </div>" +
                "    </div>" +
                "    <div class=\"layui-form-item\">" +
                "        <label class=\"layui-form-label\">新密码</label>" +
                "        <div class=\"layui-input-block\">" +
                "            <input type=\"password\" name=\"n_psw\" id='n_psw' autocomplete=\"off\" placeholder=\"请输入新密码\"" +
                "                   class=\"layui-input\">" +
                "        </div>" +
                "    </div>" +
                "    <div class=\"layui-form-item\">" +
                "        <label class=\"layui-form-label\">确认新密码</label>" +
                "        <div class=\"layui-input-block\">" +
                "            <input type=\"password\" name=\"re_psw\" id='re_psw' autocomplete=\"off\" placeholder=\"请输入确认密码\"" +
                "                   class=\"layui-input\">" +
                "        </div>" +
                "    </div>" +
                "</form>"
            var index = layer.open({
                type: 1,
                title: "修改密码",
                closeBtn: 1,
                shadeClose: true,
                btn: '确定',
                yes: function (index, layero) {
                    var o_psw = $("#o_psw").val();
                    var n_psw = $("#n_psw").val();
                    var re_psw = $("#re_psw").val();
                    var user_json = JSON.parse(sessionStorage.getItem("userJson"));
                    var u_psw=user_json.u_psw;
                    var u_id=user_json.u_id;
                    if (u_psw!==o_psw){
                        layer.msg("旧密码错误 请重新输入", {icon: 5, time: 1000});
                        return false;
                    }
                    if (n_psw !== re_psw) {
                        layer.msg("两次密码不一致", {icon: 5, time: 1000});
                        return false;
                    }
                    $.ajax({
                        url: 'update_user_psw_by_u_id',
                        dataType: "json",//数据格式
                        type: "post",//请求方式
                        cache: false,
                        data: {
                            u_id: u_id,
                            u_psw: n_psw,
                        },
                        success: function (data) {
                            if (data.code === 200) {
                                layer.msg(data.message, {icon: 6}, function () {
                                    sessionStorage.clear("userJson");
                                    location.href = '/exam_system/';
                                });
                            } else {
                                layer.msg(data.message, {icon: 5, time: 1000});
                            }
                        },
                        error: function (e) {
                            alert("出现错误！！");
                        }
                    });
                },
                area: ['500px', '400px'],
                content: text
            });
        });
    }

    function get_finish_exam_by_u_id() {
        var user_json = JSON.parse(sessionStorage.getItem("userJson"));
        var u_id = user_json.u_id;
        $.ajax({
            url: 'get_finish_exam_by_u_id',
            dataType: "json",//数据格式
            type: "post",//请求方式
            async: false,//是否异步请求
            data: {
                u_id: u_id
            },
            success: function (data) {
                if (data.code === 200) {
                    var text = ""
                    for (let i = 0; i < data.result.length; i++) {
                        text += "<div class=\"layui-col-sm12 layui-col-md4\">" +
                            "            <div class=\"layui-card\">"
                        if (data.result[i].paperResult.pr_state==="未审阅"){
                            text+="<div class=\"layui-card-header\">"
                            text+="<span style=\"float: right\"><span class=\"layui-badge\">"+data.result[i].paperResult.pr_state+"</span>"
                            text+=" </span></div>"
                            text+="<div class=\"layui-card-body\">" +
                                "<br><span style='font-size: 18px'>"+data.result[i].exam.e_name+"</span><br><br>" +
                                "<span style='font-size: 13px'>提交时间:"+data.result[i].paperResult.pr_creat_time+"</span><br>" +
                                "</div>"
                            text+="<div class=\"layui-card-header\" style='text-align: center'></div>"
                        }else {
                            text+="<div class=\"layui-card-header\">"
                            text+="<span style=\"float: right\"><span class=\"layui-badge layui-bg-green\">"+data.result[i].paperResult.pr_state+"</span>"
                            text+=" </span></div>"
                            text+="<div class=\"layui-card-body\">" +
                                "<br><span style='font-size: 18px'>"+data.result[i].exam.e_name+"</span><br><br>" +
                                "<span style='font-size: 13px'>提交时间:"+data.result[i].paperResult.pr_creat_time+"</span><br>" +
                                "</div>"
                            text+="<div class=\"layui-card-header\" style='text-align: right'>" +
                                "<a class=\"layui-btn layui-btn-normal layui-btn-sm\" onclick=\"browse_exam_res("+data.result[i].eu_id+")\">查看结果</a>" +
                                "</div>"
                        }
                        text+="            </div>" +
                            "        </div>"
                    }
                    $("#exam_list").html(text)
                }
            },
            error: function (e) {
                alert("出现错误！！");
            }
        });
    }



    function get_not_finish_exam_by_u_id() {
        var user_json = JSON.parse(sessionStorage.getItem("userJson"));
        var u_id = user_json.u_id;
        $.ajax({
            url: 'get_not_finish_exam_by_u_id',
            dataType: "json",//数据格式
            type: "post",//请求方式
            async: false,//是否异步请求
            data: {
                u_id: u_id
            },
            success: function (data) {
                if (data.code === 200) {
                    var text = ""
                    for (let i = 0; i < data.result.length; i++) {
                        text += "<div class=\"layui-col-sm12 layui-col-md4\">" +
                            "            <div class=\"layui-card\">"
                        var res_data=getDateTimeStamp(data.result[i].exam.e_begin_time, data.result[i].exam.e_end_time)
                        if (res_data[1]===1){
                            text+="<div class=\"layui-card-header\">"
                            text+="<span style=\"float: left\">考试时长:"+data.result[i].exam.e_duration+"min</span>"
                            text+="<span style=\"float: right\"><span class=\"layui-badge\">"+res_data[0]+"</span>"
                            text+=" </span></div>"
                            text+="<div class=\"layui-card-body\">" +
                                "<br><span style='font-size: 18px'>"+data.result[i].exam.e_name+"</span><br><br>" +
                                "<span style='font-size: 13px'>考试时间:"+data.result[i].exam.e_begin_time+"至"+data.result[i].exam.e_end_time+"</span><br>" +
                                "</div>"
                            text+="<div class=\"layui-card-header\" style='text-align: center'></div>"
                        }else if (res_data[1]===2){
                            text+="<div class=\"layui-card-header\">"
                            text+="<span style=\"float: left\">考试时长:"+data.result[i].exam.e_duration+"min</span>"
                            text+="<span style=\"float: right\"><span class=\"layui-badge layui-bg-green\">"+res_data[0]+"</span>"
                            text+=" </span></div>"
                            text+="<div class=\"layui-card-body\">" +
                                "<br><span style='font-size: 18px'>"+data.result[i].exam.e_name+"</span><br><br>" +
                                "<span style='font-size: 13px'>考试时间:"+data.result[i].exam.e_begin_time+"至"+data.result[i].exam.e_end_time+"</span><br>" +
                                "</div>"
                            text+="<div class=\"layui-card-header\"></div>"
                        }else {
                            text+="<div class=\"layui-card-header\">"
                            text+="<span style=\"float: left\">考试时长:"+data.result[i].exam.e_duration+"min</span>"
                            text+="<span style=\"float: right\"><span class=\"layui-badge layui-bg-orange\">"+res_data[0]+"</span>"
                            text+=" </span></div>"
                            text+="<div class=\"layui-card-body\">" +
                                "<br><span style='font-size: 18px'>"+data.result[i].exam.e_name+"</span><br><br>" +
                                "<span style='font-size: 13px'>考试时间:"+data.result[i].exam.e_begin_time+"至"+data.result[i].exam.e_end_time+"</span><br>" +
                                "</div>"
                            text+="<div class=\"layui-card-header\" style='text-align: right'>" +
                                "<a class=\"layui-btn layui-btn-normal layui-btn-sm\" onclick=\"begin_exam('"+data.result[i].exam.e_id+"','"+data.result[i].eu_id+"')\">开始考试</a>" +
                                "</div>"
                        }
                        text+="            </div>" +
                            "        </div>"
                    }
                    $("#exam_list").html(text)
                }
            },
            error: function (e) {
                alert("出现错误！！");
            }
        });
    }

    function begin_exam(e_id,eu_id){
        layui.use(['layer'], function () {
            const layer = layui.layer;
            layer.confirm('开始考试后不能离开考试界面!',{icon:0},function (){
                location.href="/exam_system/begin_exam?e_id="+e_id+"&eu_id="+eu_id;
            })
        });
    }

    function browse_exam_res(eu_id){
        layui.use(['layer'], function () {
            const layer = layui.layer;
            layer.confirm('确定查看?',{icon:0},function (){
                location.href="/exam_system/browse_exam_res?eu_id="+eu_id;
            })
        });
    }


    function getDateDiff(e_begin_time, e_end_time) {
        var minute = 1000 * 60;
        var hour = minute * 60;
        var now = new Date().getTime();
        var diffValue = now - e_end_time;
        var res_data=[];
        if (diffValue > 0) {
            res_data.push("已截止")
            res_data.push(1)
        } else {
            var diffValue1 = e_begin_time - now;
            if (diffValue1 > 0) {
                var hourC = diffValue1 / hour;
                res_data.push("距开始" + hourC.toFixed(1) + "h")
                res_data.push(2)
            }else {
                var diffValue2 = e_end_time - now;
                var hourC1 = diffValue2 / hour;
                res_data.push("距结束" + hourC1.toFixed(1) + "h")
                res_data.push(3)
            }
        }
        return res_data;
    }

    //js函数代码：字符串转换为时间戳
    function getDateTimeStamp(e_begin_time, e_end_time) {
        var e_begin_time = Date.parse(e_begin_time.replace(/-/gi, "/"));
        var e_end_time = Date.parse(e_end_time.replace(/-/gi, "/"));
        return getDateDiff(e_begin_time, e_end_time)
    }
</script>

</html>